<template>
  <div
    class="headerComponent-view"
    :class="isPadding?'padding':''"
  >
    <div class="header-left">
      <div
        v-if="title&&leftCustom!==true"
        class="header-title"
      >{{ title }}</div>
      <div
        v-if="leftCustom"
        class="left-slot"
      >
        <slot name="left-con" />
      </div>
      <!-- <div
        v-if="!title||leftCustom"
        class="back-btn"
      >
        <el-breadcrumb class="breadcrumb">
          <el-breadcrumb-item
            v-for="item in matched.slice(1,matched.length)"
            :key="item.path"
          >{{ item.meta.title }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div> -->
    </div>
    <div class="header-right">
      <div class="btn">
        <slot name="btn" />
      </div>
    </div>
  </div>
</template>

<script>
import {useRoute, useRouter} from 'vue-router'
import {computed, defineComponent, ref, toRefs} from 'vue'

export default defineComponent({
  name: 'HeaderModule',
  props: {
    isCallback: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    // 是否自定义
    leftCustom: {
      type: Boolean,
      default: false,
    },
    padding: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, context) {
    // const title = ref(props.title)
    var isPadding = ref(props.padding)

    const router = useRouter()
    const route = useRoute()

    const backClick = () => {
      if (props.isCallback) {
        context.emit('callBack')
      } else {
        router.back()
      }
    }

    var matched = computed(() => {
      console.log(route)
      return route.matched
    })

    return {
      backClick,
      ...toRefs(props),
      matched,
      isPadding,
    }
  },
})
</script>

<style lang="scss" scoped>
.headerComponent-view {
  background-color: white;
  border-bottom: 1px solid #efefef;
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  &.padding {
    padding: 0px 20px;
  }
  .header-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    .left-slot {
      font-size: 16px !important;
      font-weight: bold;
      color: #333;
    }
    .back-btn {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      .el-breadcrumb {
        margin-left: 0px !important;
      }
    }
    .header-title {
      font-size: 16px;
      line-height: 20px;
    }
  }
}
</style>
